<template>
	<view class="login">
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="content">
			<view class="top_click martop_app">
         <image :src="imgUrl + '/image/xq-word.png'"></image>
			</view>
			<view class="main">
        <view class="main-list oBorder">
          <image class="icon1" :src="imgUrl + '/image/icon-phone.png'" ></image>
		<input class="main-input" v-model="phoneData"	type="number" maxlength="11" 	placeholder="手机号" 	/>
        </view>
         <view class="main-list oBorder">
           <image class="icon2" :src="imgUrl + '/image/icon-pwd.png'" mode="widthFix"></image>
		    <input class="main-input" v-model="verCode"	type="number" maxlength="11" 	placeholder="验证码" 	/>
        <view class="blue" :class="isGetPhone?'blueCheck':''" @click="getVerCode">{{ getVerCodeSecond }}</view>
        </view>
				<!-- <wInput v-model="phoneData" type="text" maxlength="11" placeholder="手机号"></wInput>
				<wInput v-model="passData" type="password" placeholder="密码" v-if="currentIndex == 1"></wInput>
				<wInput
					v-model="verCode"
					type="number"
					placeholder="验证码"
					isShowCode
					codeText="获取验证码"
					ref="runCode"
					@setCode="getVerCode()"
					v-if="currentIndex == 0"
				></wInput> -->
			</view>
			<wButton text="登 录" :bgColor="isGetPhone?'#4397FF':'#95C4FF'" :rotate="isRotate" @click.native="startLogin()"></wButton>

			<!-- 底部信息 -->
			<view class="bottom_pact">
				<view class="agreement">
					登录即注册并表示你同意和《
						<text class="agreement-text"  @click="toTerms">注册协议</text>
						》和《
						<text class="agreement-text" @click="toPrivacy">隐私政策</text>》
					</view>
			</view>
		</view>
	</view>
</template>

<script>
var _this;
import wButton from './watch-login/watch-button.vue'; //button
import { mapMutations, mapState } from 'vuex';
import { getqYLogin } from '@/apis/index'
import http from '@/apis/http';
export default {
	data() {
		return {
			//logo图片 base64
			logoImage: '',
			phoneData: '', //用户/电话
			passData: '', //密码
			isRotate: false, //是否加载旋转
			checked: false,
			radioValue: 0,
			currentIndex: 0,
			isWeiXin: 0,
			verCode: '',
      code: null,
      second:60,
      getVerCodeSecond:'获取验证码',
      phone:null,
      imgUrl: ''
		};
	},
	components: {
		wButton
	},
	computed: {
    ...mapState(['hasLogin', 'userInfo']),
    isGetPhone(){
      	var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			 if(!this.phoneData){
          return false
       }else if (myreg.test(this.phoneData)) {
        return true
       }else{
       return false
       }
    }
    	// getVerCodeSecond(){
			// 	//验证码倒计时计算
			// 	if(this.second<=0){
			// 		return "获取验证码";
			// 	}else{
			// 		if(this.second<10){
			// 			return '0'+this.second+'s后重发';
			// 		}else{
			// 			return this.second+'s后重发';
			// 		}
			// 	}
			// }
	},
	created() {
		// 初始化imgUrl
		if (this.$mConfig && this.$mConfig.imageUrl) {
			this.imgUrl = this.$mConfig.imageUrl;
		}
	},
	onLoad() {
		// let isWeiXin = this.$common.isWeiXinBrowser();
		// if (isWeiXin) {
		// 	this.isWeiXin = 1;
		// }
		
		// 检查是否已登录，如果已登录则跳转到主页
		if (http.checkLogin()) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	},
	onShow() {
		// 页面显示时检查是否已登录
		if (http.checkLogin()) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	},
	mounted() {
		_this = this;
	},
	methods: {
		...mapMutations(['login', 'SET_USERINFO', 'SET_TOKEN']),

		// H5微信登录
		wechatH5Login() {
      
			if (this.radioValue != 1) {
				uni.showToast({
					title: '请勾选用户协议',
					icon: 'none'
				});
				return false;
			}
			const that = this;
			let href = window.location.origin;
			let page = that.$api.prePage();
			let prePath = '/pages/index/index';
			if (page) {
				prePath = page.__page__.path;
			}
			window.location =
				'https://open.weixin.qq.com/connect/oauth2/authorize?' +
				'appid=' +
				Api.h5Appid +
				'&redirect_uri=' +
				escape(href) +
				'&response_type=code&scope=snsapi_userinfo&state=mallplus#wechat_redirect';
		},

		// 登录
		async startLogin() {
			if (!this.isGetPhone) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请输入正确的手机号'
				});
				return;
			}
			
			if (!this.verCode) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请输入验证码'
				});
				return;
			}
			
			let params = {
				mobile: this.phoneData,
				code: this.verCode,
			};
			
			try {
				let data = await this.$apis.getqYLogin(params);
				if (data) {
					// 存储到Vuex
					this.SET_USERINFO(data);
					this.SET_TOKEN(data.access_token);
					
					// 持久化存储，防止刷新丢失
					uni.setStorageSync('userInfo', data);
					uni.setStorageSync('token', data.access_token);
					
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
					
					// 跳转到认证页面
					uni.navigateTo({
						url: `/pages/user/renzheng/settled?mobile=${this.phoneData}`
					});
				}
			} catch (error) {
				console.error('登录失败', error);
				uni.showToast({
					title: '登录失败，请重试',
					icon: 'none'
				});
			}
		},

		//获取验证码
		async getVerCode() {
			if (!this.isGetPhone) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号码',
					position: 'bottom'
				});
				return false;
			}
			
			// 倒计时
			if(this.second < 60) {
				return;
			}
			
			let params = {
				mobile: this.phoneData
			};
			
			try {
				let res = await this.$apis.getCode(params);
				if (res.code == 0) {
					uni.showToast({
						title: res.msg || '验证码已发送',
						icon: 'none',
						position: 'bottom'
					});
					
					// 开始倒计时
					this.startCountdown();
				}
			} catch (error) {
				console.error('获取验证码失败', error);
				uni.showToast({
					title: '获取验证码失败，请重试',
					icon: 'none'
				});
			}
		},
		
		// 倒计时方法
		startCountdown() {
			this.second = 60;
			this.getVerCodeSecond = this.second + 's后重发';
			
			const timer = setInterval(() => {
				this.second--;
				if (this.second <= 0) {
					this.getVerCodeSecond = '获取验证码';
					clearInterval(timer);
				} else {
					this.getVerCodeSecond = this.second + 's后重发';
				}
			}, 1000);
		},

		// 返回
		navBack() {
			uni.navigateBack({
				delta: 1
			});
			// uni.switchTab({ url: '/pages/index/index' });
		},

		toTerms() {
			this.$mRouter.push({
				route: this.$mRoutesConfig.terms
			});
		},
		
		toPrivacy() {
			this.$mRouter.push({
				route: this.$mRoutesConfig.privacy
			});
		},
	}
};
</script>

<style lang="scss">
page{
  background: #fff;
}
.bottom_pact {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70upx;
	line-height: 70upx;
	width: 100%;
	position: fixed;
	bottom: 40upx;
	.agreement{
		font-size: 22rpx;
			color: #666;
	}
	.agreement-text {
		font-size: 22rpx;
			color: #FF0000;
	}
}
.back-btn {
	position: absolute;
	left: 40upx;
	z-index: 9999;
	padding-top: var(--status-bar-height);
	// top: 40upx;
	top: 20upx;
	font-size: 40upx;
	color: $font-color-dark;
}

.top_click {
	display: flex;
	width: 100%;
	height: 120upx;
	align-items: center;
	justify-content: center;
  margin-bottom: 20upx;
  image{
      width: 280rpx;
        height: 52rpx;
        margin-bottom: 42rpx;
  }
}

.top_click_xcx {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	margin-bottom: 20upx;
}

.martop_app {
	margin-top: 200upx;
}

.martop_xcx {
	margin-top: 180upx;
	display: flex;
	flex-direction: column;
}

.header {
	margin: 50upx 0 50upx 0;
	text-align: center;
	width: 100%;
	height: 300rpx;
	line-height: 450rpx;
}

.header image {
	width: 200upx;
	height: 200upx;
}

.content2 {
	padding: 30upx 80upx;
}

.content2 text {
	display: block;
	color: #9d9d9d;
	margin-top: 40rpx;
}

.bottom-select-line {
	width: 50upx;
	height: 8upx;
	// margin-top: 10upx;
	border-radius: 15upx;
	background: $main-color;
	color: $main-color;
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 主体 */
.main {
	display: flex;
	flex-direction: column;
	padding-left: 70upx;
	padding-right: 70upx;
}

.tips {
	color: #999999;
	font-size: 28upx;
	margin-top: 64upx;
	margin-left: 48upx;
}


.main-list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 110rpx;   /* Input 高度 */
		color: #333333;
		padding: 32upx;
		margin-top:24upx;
		margin-bottom: 24upx;
    width:650rpx;
    box-sizing: border-box;
    background: #F6F7F9;
    border-radius: 2.5rem ;
    .icon1{
      width: 30rpx;
      height: 36rpx;
    }
    .icon2{
      width: 36rpx;
    }
     .blue{
      background: #95C4FF;
      padding: 0 20rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      color: #fff !important;
      font-size: 24rpx;
    }
    .blueCheck{
      background: #4397FF;
    }
  .main-input{
		flex: 1;
		text-align: left;
		font-size: 30upx;
		padding-right: 10upx;
    margin-left: 20upx;
    color: #333;
	}
    
  }
</style>
